<template>
  <div class="quoteCalculateResult_box" ref="quoteCalculateResult_box">
    <div class="quoteCalculateResult_header">
      <div class="quoteCalculateResult_head_return" @click="returnHistiy">
        <img src="@/pages/mobile/assets/img/Back@3x.png" alt />
        <span>测算结果</span>
      </div>
      <p>报价测算</p>
    </div>
    <div class="quoteCalculateResult_tab">
      <div class="quoteCalculateResult_tab_header">
        <h3 @click="tabActive = '1'" :class="{ h3_active: tabActive == '1' }">
          测算结果信息
        </h3>
        <h3 @click="tabActive = '2'" :class="{ h3_active: tabActive == '2' }">
          租金计划表
        </h3>
      </div>
      <div></div>
    </div>
    <div class="quoteCalculateResult_table_top"></div>
    <div
      class="quoteCalculateResult_table wrapperResult"
      ref="wrapperResult"
      :class="{ quoteCalculateResult_table_active: tabActive == '2' }"
    >
      <div>
        <div class="quoteCalculateResult_table_result">
          <div class="quoteCalculateResult_table_result_item">
            <p>方案名称</p>
            <span v-if="resultData.quoteName">{{ resultData.quoteName }}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>融资金额</p>
            <span v-if="resultData.financingAmount">{{
              resultData.financingAmount.toLocaleString()
            }}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>计划投放日期</p>
            <span v-if="resultData.planRentDate">{{
              resultData.planRentDate
            }}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>租赁方式</p>
            <span
              v-for="item in LeaseModeSelect"
              v-if="resultData.leaseMode == item.value"
              >{{ item.name }}</span
            >
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>租赁资产分类</p>
            <span
              v-for="item in AssetsNatureSelect"
              v-if="resultData.assetsNature == item.value"
              >{{ item.name }}</span
            >
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>报价算法</p>
            <span
              v-for="item in LeaseAlgorithmSelect"
              v-if="resultData.quoteRuleList[0].leaseAlgorithm == item.value"
              >{{ item.name }}</span
            >
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>收租周期</p>
            <span
              v-for="item in LeaseCycleSelect"
              v-if="resultData.quoteRuleList[0].leaseCycle == item.value"
              >{{ item.name }}</span
            >
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>期限（月）</p>
            <span v-if="resultData.leaseTimes">{{
              resultData.leaseTerm
            }}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>报价利率</p>
            <span v-if="resultData.quoteRuleList">{{
              (resultData.quoteRuleList[0].interestRate * 100).toFixed(5)
            }}%</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>手续费比例</p>
            <span v-if="resultData.poundageRatio">{{
              (resultData.poundageRatio * 100).toFixed(5)
            }}%</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>风险金比例</p>
            <span v-if="resultData.depositRatio">{{
              (resultData.depositRatio * 100).toFixed(5)
            }}%</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>留购价</p>
            <span v-if="resultData.purchasePrice">{{
              resultData.purchasePrice.toLocaleString()
            }}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>租金总额</p>
            <span v-if="resultData.leaseRentSum">{{
              resultData.leaseRentSum.toLocaleString()
            }}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>本金总额</p>
            <span v-if="resultData.financingAmount">{{
              resultData.financingAmount.toLocaleString()
            }}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>利息总额</p>
            <span v-if="resultData.leaseInterestSum">{{
              resultData.leaseInterestSum.toLocaleString()
            }}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>XIRR</p>
            <span v-if="resultData.leaseXirr"
              >{{ (resultData.leaseXirr *100).toFixed(2)
              }}{{
                " (" + "%" + ")"
              }}</span
            >
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>IRR</p>
            <span v-if="resultData.leaseIrr"
              >{{ (resultData.leaseIrr*100).toFixed(2)
              }}{{
                " (" + "%" + ")"
              }}</span
            >
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>手续费金额</p>
            <span v-if="resultData.poundageAmount">{{
              resultData.poundageAmount.toLocaleString()
            }}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>风险金金额</p>
            <span v-if="resultData.depositAmount">{{
              resultData.depositAmount.toLocaleString()
            }}</span>
          </div>
        </div>
        <div class="quoteCalculateResult_table_result_font"></div>
      </div>
    </div>
    <div
      class="quoteCalculateResult_table"
      :class="{ quoteCalculateResult_table_active: tabActive == '1' }"
    >
      <div class="quoteCalculateResult_table_hint">
        <p>&lt; 左右滑动查看数据详情 &gt;</p>
      </div>
      <div class="tab" ref="tab">
        <table ref="tabWrapper" class="tabWrapper">
          <tr class="tab_title">
            <th
              class="tab_item"
              v-for="item in itemList"
              :key="item.index"
              ref="tabitem"
            >
              {{ item.title }}
            </th>
          </tr>
          <div
            class="tab_content_box wrapperResultTable"
            ref="wrapperResultTable"
          >
            <div>
              <tr
                v-for="(itemContent, index) in resultData.quoteInoutPlanList"
                :key="itemContent.index"
                class="tab_content"
              >
                <td>{{ index + 1 }}</td>
                <td>{{ itemContent.planDate }}</td>
                <td>{{ itemContent.transType ==  "0100002" ?"收租":"回租" }}</td>
                <td>{{ itemContent.rent.toLocaleString() }}</td>
                <td>{{ itemContent.interest.toLocaleString() }}</td>
                <td>{{ itemContent.corpus.toLocaleString() }}</td>
              </tr>
            </div>
          </div>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "",
  props: ["resultDataId"],
  data () {
    return {
      resultData: {},
      tabActive: "1",
      LeaseModeSelect: [], //租赁方式
      AssetsNatureSelect: [], //租赁资产类型
      LeaseAlgorithmSelect: [], //报价算法
      LeaseCycleSelect: [], // 收租周期
      fontSize:"",
      itemList: [
        {
          title: "期次"
        },
        {
          title: "计划收取日期"
        },
        {
          title: "交易类别"
        },
        {
          title: "租金"
        },
        {
          title: "利息"
        },
        {
          title: "本金"
        }
      ]
    };
  },
  mounted () {
    this.fontSize = parseFloat(
      document.getElementsByTagName("html")[0].style.fontSize
    ); //获取html元素
    var eleHeight =
      this.$refs.quoteCalculateResult_box.offsetHeight - this.fontSize * 2.0;
    this.$refs.wrapperResultTable.style.height = eleHeight + "px";
    this.scrolls = new BScroll(this.$refs.wrapperResult, { click: true });
    this.scrolls = new BScroll(this.$refs.wrapperResultTable, { click: true });
    this.$nextTick(() => {
      this.InitTableScroll();
      console.log('gggggggllllllll', '')
    });

    // 获取枚举
    setTimeout(() => {
      this.QueryEnum("joys-calculate", "leaseMode", this.LeaseModeSelect); //租赁方式
      this.QueryEnum("joys-calculate", "assetsNature", this.AssetsNatureSelect); //资产性质
      this.QueryEnum("joys-calculate", "leaseAlgorithm", this.LeaseAlgorithmSelect); //报价算法
      this.QueryEnum("joys-calculate", "leaseCycle", this.LeaseCycleSelect); //收租周期
    }, 100);

  },
  created () {
    if (!this.$route.query.id) {
      this.quoteCalculateResultQuery(this.resultDataId)
    } else {
      this.quoteCalculateResultQuery(this.$route.query.id)
    }
  },
  methods: {
    // 枚举查询
    QueryEnum (serviceName, typeName, dataArray) {
      this.$axios({
        method: "get",
        url: "/joys-rest/" + serviceName + "/enums/" + typeName + "/items",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
        .then(res => {
          for (const key in res.data) {
            dataArray.push({
              name: res.data[key].label,
              value: res.data[key].value
            });
          }
          console.log(dataArray, 'shuju')
          // dataArray[0].splice(0, 1);
          // if (typeName == "leaseAlgorithm") {
          //   dataArray[0].splice(dataArray[0].length - 4);
          // }
        })
        .catch(error => {
          console.log(error, "枚举获取失败");
        });
    },
    // 请求数据
    quoteCalculateResultQuery (id) {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-calculate//calculator/all/" + id,
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
          "Content-Type": "application/json;charset=UTF-8"
        },
      })
        .then(res => {
          console.log(res.data, '你是')
          this.resultData = res.data
        })
        .catch(error => {
          console.log("error", "登录错误");
        });
    },
    introduceIndex () {
      this.$router.push({
        path: "/quoteCalculate/quoteCalculateIntroduce"
      });
    },
    returnHistiy () {
      this.$router.goBack();
    },
    InitTableScroll () {
      this.$refs.tabWrapper.style.width = 6.6*this.fontSize + "px";
      this.$nextTick(() => {
        if (!this.scroll) {
          console.log('gggggggoooo', '')
          this.scroll = new BScroll(this.$refs.tab, {
            startX: 0,
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    }
  },
  watch: {
    resultData () {
      this.scroll.finishPullDown(); //下拉刷新， 数据更新完毕，需要调用此方法告诉 better-scroll 数据已加载。
      this.scroll.finishPullUp(); //上拉加载， 数据更新完毕， 需要调用此方法告诉 better-scroll 数据已加载。
      this.$nextTick(() => {
        this.InitTableScroll();
      });
    }
  }
};
</script>

<style scoped lang="less">
.quoteCalculateResult_box {
  z-index: 300;
  width: 100%;
  height: 100%;
  background: #fff;

  position: fixed;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .quoteCalculateResult_header {
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    background: #ffffff;
    z-index: 201;
    .quoteCalculateResult_head_return {
      width: 100%;
      position: fixed;
      top: 0px;
      float: left;
      margin-top: -0.04rem;
      float: left;
      img {
        // width: 0.15rem;
        height: 0.205rem;
        padding-left: 0.085rem;
        padding-top: 0.02rem;
      }
      span {
        font-size: 0.16rem;
        line-height: 0.16rem;
        font-family: PingFangSC-Regular;
        color: #3e3e3e;
        letter-spacing: 0;
        line-height: 16px;
      }
    }
    p {
      font-family: PingFangSC-Semibold;
      font-size: 0.16rem;
      color: #3e3e3e;
      height: 0.44rem;
      letter-spacing: 0;
      font-weight: 700;
      line-height: 0.44rem;
      text-align: center;
      font-family: PingFangSC-Medium;
    }
  }
  .quoteCalculateResult_tab {
    width: 100%;
    overflow: hidden;
    height: 0.5rem;
    .quoteCalculateResult_tab_header {
      height: 0.5rem;
      width: 85%;
      margin: 0 auto;
      line-height: 0.5rem;
      h3 {
        height: 0.64rem;
        font-family: PingFangSC-Medium;
        font-size: 0.16rem;
        color: #443a38;
        text-align: center;
        width: 50%;
        float: left;
        transition: all 0.337s ease;
      }
      .h3_active {
        color: #265ca7;
        font-weight: 700;
      }
      .h3_active::after {
        content: "";
        height: 3px;
        display: block;
        background: #265ca7;
        width: 80px;
        position: relative;
        text-align: center;
        top: -3px;
        margin: 0 auto;
      }
    }
  }
  .quoteCalculateResult_table_top {
    height: 0.11rem;
    display: block;
    width: 100%;
    background-color: #fbf9fe;
  }
  .quoteCalculateResult_table {
    width: 100%;
    overflow: hidden;
    .quoteCalculateResult_table_result {
      background: #ffffff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
      border-radius: 8px;
      margin: 0 0.16rem;
      margin-top: 0.11rem;
      background: #ffffff;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
      border-radius: 4px;
      padding-left: 0.12rem;
      padding-right: 0.46rem;
      padding-bottom: 0.16rem;
      .quoteCalculateResult_table_result_item {
        height: 0.74rem; // width: 100%;
        border-bottom: 0.02rem dashed rgba(0, 22, 22, 0.25);
        p {
          padding-top: 0.12rem;
          font-family: PingFangSC-Regular;
          font-size: 0.12rem;
          color: #80858b;
          line-height: 0.15rem;
        }
        span {
          margin-top: 0.09rem;
          font-family: PingFangSC-Regular;
          font-size: 0.19rem;
          display: block;
          color: #443a38;
          line-height: 0.28rem;
          font-size: 19px;
          text-align: left;
        }
      }
      // .quoteCalculateResult_table_result_item:nth-last-child(1) {
      //   border-bottom: 0rem dashed rgba(0, 22, 22, 0.25);
      // }
    }
    .quoteCalculateResult_table_result_font {
      // width: 100%;
      margin: 0 0.28rem;
      height: 1rem;
      text-align: center;
      margin-top: 0.16rem;
    }
    .quoteCalculateResult_table_hint {
      height: 0.44rem;
      line-height: 0.44rem;
      text-align: center;
      p {
        font-family: PingFangSC-Regular;
        font-size: 0.12rem;
        color: #443a38;
        text-align: center;
        font-family: PingFangSC-Regular;
      }
    }
    .tab {
      width: 100%;
      display: block;
      overflow: hidden;
      padding: 5px;
      .tabWrapper {
        tr:nth-child(2n) {
          background: #f9fafb;
        }
        .tab_title {
          display: flex;
          .tab_item {
            text-align: center;
            font-family: PingFangSC-Light;
            font-size: 13px;
            color: #443a38;
            letter-spacing: 0;
            height: 0.32rem;
            line-height: 0.32rem;
            flex: 0 0 110px;
            width: 0.9rem;
            background: #f9fafb;
          }
        }
        .tab_content_box {
          .tab_content {
            // width: 660px;
            display: flex;
            overflow: hidden;
            td {
              width: 110px;
              text-align: center;
              font-family: Helvetica;
              font-size: 13px;
              color: rgba(0, 22, 22, 0.85);
              letter-spacing: 0;
              line-height: 0.32rem;
            }
          }
        }
        .wrapperResultTable {
          overflow: hidden;
          width: 100%;
        }
      }
    }
  }
  .quoteCalculateResult_table_active {
    height: 0.01px !important;
  }
  .wrapperResult {
    overflow: hidden;
    height: 100%;
    background-color: #fbf9fe;
  }
  .scroll {
    .wrapper {
      top: 1.58rem;
      .pulldown-wrapper {
        top: 0px;
      }
    }
  }
}
.sss {
  z-index: 6606;
  width: 100%;
  height: 100%;
  position: fixed;
  background: red;
}
</style>
